<template>
  <ScrollWrapper>
    <div class="container">
      <div class="container-content">
        <!-- 页面头部 -->
        <div class="header">
          <h2 class="title"></h2>
          <div class="actions">
            <a-button class="sync-btn" @click="handleSync">同步</a-button>
            <a-button type="primary" class="add-btn" @click="handleAdd">添加</a-button>
          </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
          <a-table
              :columns="columns"
              :data-source="dataSource"
              :pagination="false"
              :scroll="{ x: 1200 }"
              class="department-table"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'action'">
                <div class="action-buttons">
                  <a-button size="small" class="detail-btn" @click="handleViewDetail(record)">
                    编辑
                  </a-button>
                  <a-button
                      size="small"
                      :class="record.status === '正常' ? 'disable-btn' : 'enable-btn'"
                      @click="handleToggleStatus(record)"
                  >
                    {{ record.status === '正常' ? '作废' : '恢复' }}
                  </a-button>
                </div>
              </template>
            </template>
          </a-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <a-pagination
              v-model:current="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :show-size-changer="false"
              :show-quick-jumper="false"
              @change="handlePageChange"
          />
        </div>
      </div>
    </div>
    
    <!-- 编辑弹框 -->
    <a-modal v-model:open="visible" :footer="false" :closable="false" width="800px">
      <div class="modal-container">
        <div class="title-container">
          <div class="title">
            编辑
          </div>
          <div class="close" @click="visible = false">
            关闭
          </div>
        </div>
        
        <div class="form-content">
          <a-form :model="formData" layout="vertical">
            <!-- 第一行：部门和职位级别 -->
            <div class="form-row">
              <div class="form-item">
                <label class="form-label">部门</label>
                <a-select v-model:value="formData.department" placeholder="请选择部门">
                  <a-select-option value="全公司">全公司</a-select-option>
                  <a-select-option value="市场部">市场部</a-select-option>
                  <a-select-option value="技术部">技术部</a-select-option>
                  <a-select-option value="人事部">人事部</a-select-option>
                </a-select>
              </div>
              <div class="form-item">
                <label class="form-label">职位级别</label>
                <a-select v-model:value="formData.level" placeholder="请选择职位级别">
                  <a-select-option value="全公司">全公司</a-select-option>
                  <a-select-option value="P1">P1</a-select-option>
                  <a-select-option value="P2">P2</a-select-option>
                  <a-select-option value="P3">P3</a-select-option>
                </a-select>
              </div>
            </div>
            
            <!-- 第二行：角色标识 -->
            <div class="form-row">
              <div class="form-item ">
                <label class="form-label">角色标识</label>
                <a-select v-model:value="formData.role" placeholder="请选择角色标识">
                  <a-select-option value="全公司">全公司</a-select-option>
                  <a-select-option value="管理员">管理员</a-select-option>
                  <a-select-option value="普通用户">普通用户</a-select-option>
                </a-select>
              </div>
            </div>
            
            <!-- 第三行：金额和数量 -->
            <div class="form-row">
              <div class="form-item">
                <label class="form-label">金额</label>
                <a-select v-model:value="formData.amount" placeholder="请选择金额">
                  <a-select-option value="全公司">全公司</a-select-option>
                  <a-select-option value="1000">1000</a-select-option>
                  <a-select-option value="2000">2000</a-select-option>
                  <a-select-option value="3000">3000</a-select-option>
                </a-select>
              </div>
              <div class="form-item">
                <label class="form-label">数量</label>
                <a-select v-model:value="formData.quantity" placeholder="请选择数量">
                  <a-select-option value="全公司">全公司</a-select-option>
                  <a-select-option value="100">100</a-select-option>
                  <a-select-option value="200">200</a-select-option>
                  <a-select-option value="300">300</a-select-option>
                </a-select>
              </div>
            </div>
            
            <!-- 第四行：简述 -->
            <div class="form-row">
              <div class="form-item">
                <label class="form-label">简述</label>
                <a-select v-model:value="formData.brief" placeholder="请选择简述">
                  <a-select-option value="全公司">全公司</a-select-option>
                  <a-select-option value="简述1">简述1</a-select-option>
                  <a-select-option value="简述2">简述2</a-select-option>
                </a-select>
              </div>
            </div>
            
            <!-- 第五行：说明（全宽） -->
            <div class="form-row full-width">
              <div class="form-item">
                <label class="form-label">说明</label>
                <a-textarea 
                  v-model:value="formData.description" 
                  placeholder="详细说明"
                  :rows="4"
                  class="description-textarea"
                />
              </div>
            </div>
          </a-form>
        </div>
        
        <!-- 按钮区域 -->
        <div class="button-container">
          <a-button class="save-btn" @click="handleSave">保存</a-button>
          <a-button class="cancel-btn" @click="visible = false">取消</a-button>
        </div>
      </div>
    </a-modal>
  </ScrollWrapper>
</template>

<script>
import ScrollWrapper from "@/components/ScrollWrapper/ScrollWrapper.vue";
import {message} from 'ant-design-vue';

export default {
  components: {
    ScrollWrapper,
  },
  name: "tempManage",
  data() {
    return {
      visible: false,
      currentPage: 1,
      pageSize: 10,
      total: 40,
      formData: {
        department: '全公司',
        level: '全公司',
        role: '全公司',
        amount: '全公司',
        quantity: '全公司',
        brief: '全公司',
        description: ''
      },
      columns: [
        {
          title: '部门',
          dataIndex: 'departmentName',
          key: 'departmentName',
          align: 'center'
        },
        {
          title: '职位级别',
          dataIndex: 'level',
          key: 'level',
          align: 'center'
        },
        {
          title: '角色标识',
          dataIndex: 'tip',
          key: 'tip',
          align: 'center'
        },
        {
          title: '金额',
          dataIndex: 'money',
          key: 'money',
          align: 'center'
        },
        {
          title: '数量',
          dataIndex: 'number',
          key: 'number',
          align: 'center'
        },
        {
          title: '简述',
          dataIndex: 'simple',
          key: 'simple',
          align: 'center'
        },
        {
          title: '说明',
          dataIndex: 'memo',
          key: 'memo',
          align: 'center'
        },
        {
          title: '',
          key: 'action',
          align: 'center'
        }
      ],
      dataSource: [
        {
          departmentName: "市场部",
          level: "P1",
          tip: "标识",
          money: "1000",
          number: 232,
          simple: "简述",
          memo: "这是说明"
        }
      ]
    }
  },
  methods: {
    handleSync() {
      message.success('同步成功');
    },
    handleAdd() {
      this.visible = true;
      this.resetForm();
    },
    handleViewDetail(record) {
      this.visible = true;
      this.fillFormData(record);
    },
    handleToggleStatus(record) {
      const newStatus = record.status === '正常' ? '作废' : '正常';
      record.status = newStatus;
      message.success(`${record.departmentName} 已${newStatus}`);
    },
    handlePageChange(page) {
      this.currentPage = page;
      message.info(`切换到第 ${page} 页`);
    },
    handleSave() {
      message.success('保存成功');
      this.visible = false;
    },
    resetForm() {
      this.formData = {
        department: '全公司',
        level: '全公司',
        role: '全公司',
        amount: '全公司',
        quantity: '全公司',
        brief: '全公司',
        description: ''
      };
    },
    fillFormData(record) {
      this.formData = {
        department: record.departmentName || '全公司',
        level: record.level || '全公司',
        role: record.tip || '全公司',
        amount: record.money || '全公司',
        quantity: record.number || '全公司',
        brief: record.simple || '全公司',
        description: record.memo || ''
      };
    }
  }
}
</script>

<style scoped lang="scss">
.modal-container {
  width: 100%;
  padding: 20px;

  .title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    .title {
      font-size: 18px;
      font-weight: bold;
      color: #000;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #3a7c5a;
      }
    }

    .close {
      color: #000;
      cursor: pointer;
      font-size: 14px;
      border-bottom: 1px solid #000;
      padding-bottom: 2px;
      
      &:hover {
        opacity: 0.7;
      }
    }
  }

  .form-content {
    margin-bottom: 30px;
    border:1px rgba(0,0,0,0.6) solid;
    padding:10px 20px;
    
    .form-row {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      
      &.full-width {
        .form-item {
          width: 100%;
        }
      }
      
      .form-item {
        flex: 1;
        
        .form-label {
          display: block;
          margin-bottom: 8px;
          font-size: 14px;
          color: #333;
          font-weight: 500;
        }
        
        :deep(.ant-select) {
          width: 100%;
          
          .ant-select-selector {
            border-radius: 4px;
            border: 1px solid #d9d9d9;
            
            &:hover {
              border-color: #3a7c5a;
            }
          }
          
          &.ant-select-focused .ant-select-selector {
            border-color: #3a7c5a;
            box-shadow: 0 0 0 2px rgba(58, 124, 90, 0.2);
          }
        }
        
        .description-textarea {
          width: 100%;
          
          :deep(.ant-input) {
            border-radius: 4px;
            border: 1px solid #d9d9d9;
            resize: vertical;
            
            &:hover {
              border-color: #3a7c5a;
            }
            
            &:focus {
              border-color: #3a7c5a;
              box-shadow: 0 0 0 2px rgba(58, 124, 90, 0.2);
            }
          }
        }
      }
    }
  }
  
  .button-container {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    
    .save-btn {
      background-color: #3a7c5a;
      border-color: #3a7c5a;
      color: #fff;
      border-radius: 4px;
      padding: 8px 24px;
      height: 36px;
      font-size: 14px;
      
      &:hover {
        background-color: #2d5f47;
        border-color: #2d5f47;
      }
    }
    
    .cancel-btn {
      background-color: #666;
      border-color: #666;
      color: #fff;
      border-radius: 4px;
      padding: 8px 24px;
      height: 36px;
      font-size: 14px;
      
      &:hover {
        background-color: #555;
        border-color: #555;
      }
    }
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0px 20px 24px 0;
  box-sizing: border-box;
}

.container-content {
  background-color: #fff;
  display: flex;
  margin-top: 20px;
  flex-direction: column;
  border-radius: 30px;
  flex: 1;
  padding: 24px 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  .title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  .actions {
    display: flex;
    gap: 12px;
    margin: 0 30px;

    .sync-btn {
      color: #3a7c5a;
      font-weight: 400;
      border-radius: 6px;
      width: 110px;
      border-color: #3a7c5a;

      &:hover {
        opacity: 0.6;
      }
    }

    .add-btn {
      background-color: #3a7c5a;
      border-radius: 6px;
      width: 110px;

      &:hover {
        opacity: 0.6;
      }
    }
  }
}

.table-container {
  flex: 1;
  margin-bottom: 24px;

  :deep(.department-table) {
    .ant-table-thead > tr > th {
      background-color: #fff;
      font-weight: 500;
      color: #666;
      border-bottom: 1px solid #f0f0f0;
      padding: 16px 8px;
    }

    .ant-table-tbody > tr > td {
      padding: 16px 8px;
      border-bottom: 1px solid #f0f0f0;
      color: #333;
    }

    .ant-table-tbody > tr:hover > td {
      background-color: #f5f5f5;
    }

    .ant-table-cell:before {
      width: 0 !important;
    }

    .ant-table-thead > tr > .ant-table-cell {
      color: #d9d9d9;
    }
  }

  .action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;

    .detail-btn {
      background-color: #fff;
      border: 1px solid #3a7c5a;
      color: #3a7c5a;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        opacity: 0.6;
      }
    }

    .enable-btn {
      background-color: #3a7c5a;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        opacity: 0.6;
      }
    }

    .disable-btn {
      background-color: #ff4d4f;
      border-color: #ff4d4f;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        background-color: #ff7875;
        border-color: #ff7875;
      }
    }
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;

  :deep(.ant-pagination) {
    .ant-pagination-item {
      border-radius: 4px;

      &.ant-pagination-item-active {
        background-color: #3a7c5a;
        border-color: #3a7c5a;

        a {
          color: #fff;
        }
      }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
      border-radius: 4px;

      &:hover {
        border-color: #3a7c5a;
        color: #3a7c5a;
      }
    }
  }
}

:deep(.ant-tag) {
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;

  &.ant-tag-green {
    background-color: #f6ffed;
    border-color: #b7eb8f;
    color: #52c41a;
  }

  &.ant-tag-orange {
    background-color: #fff7e6;
    border-color: #ffd591;
    color: #fa8c16;
  }
}
</style>